<template>
    <!-- 解决问题 -->
    <div>
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
            <!-- <el-card style="width: 100%; height: 100%; margin-right: 10px"> -->
              <div class="item-1">
              <span style="font-size: 20px;">项目名称</span>
                <span  style="font-size: 20px;margin-left: 25px;">
                    {{ name }}
                  </span>
              </div>
              <el-form ref="formData" :model="formData" :rules="ruleForm"> 
              <el-form-item  prop=" problemId" class="item-2">
               
                
              <span style="font-size: 20px;">问题描述</span>
                <span  style="font-size: 20px;margin-left: 25px;">
                    {{ text }}
                </span>
             
              </el-form-item>
              
              <!-- action文件上传地址  
                :show-file-list="false"不显示文件列表 
                multiple多文件上传
                list-type="picture"列表显示
                :headers="{token:token1}"
                :on-success="handleFileUpload"上传成功的方法
                :file-list="fileList"
                :http-request="uploadFile"上传方法
                action="http://192.168.0.105:8080/file/upload"-->
              <div style="display: flex; margin: 20px 0 0 400px">
                <!-- <el-card style="width: 60%; margin-right: 10px"> -->
                <div slot="header" class="clearfix" style="margin-right: 10px">
                  <span style="font-size: 20px;">上传文件</span>
                </div>
                <div class="clearfix-2">
                  <el-upload
                    ref="upload"
                    :before-upload="beforeUpload"
                    action
                    :on-success="handleFileUpload"
                    multiple
                    list-type="picture-card"
                    :file-list="selectedFiles"
                    :limit="limit" 
                    :on-exceed="handleExceed"
                    class="avatar-uploader"
                    >
  
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                      <span class="el-upload-list__item-actions">
                        <span  class="el-upload-list__item-delete" @click="handleRemove(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                      <span class="fileName">{{ file.name || file.fileName }}</span>
                    </div>
                    
                      
                  </el-upload>
                </div>
                
                <!-- </el-card> -->
              </div>
  
              <el-form-item  prop="solveDesc" class="item-3">
                
                <span style="font-size: 20px;">解决方案</span>
                 <el-input 
                  type="textarea"
                  :rows="8"
                  placeholder="请输入解决方案"
                  v-model="formData.solveDesc"
                  class="input"
                  style="font-size: 16px;">
                  </el-input>
                  <!-- <div style="font-size: 20px;font-weight: bold;">具体问题</div>
  
                  <div style="width: 80%;display: inline-block;">
                    <div id="editor"></div>
                  </div> -->
                  
              </el-form-item>
              </el-form>
                       
              <div class='container'>
                  <el-button  type="primary"  @click="dialogVisible = true"
                  class="change-1">
                      提交方案
                  </el-button>
                  <el-button  type="primary"  @click="back"
                  class="change-2">
                      返回
                  </el-button>
              </div>
  
             
          <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          append-to-body
          top="20%"
          
          > 
          <!-- append-to-body出现不会屏幕变暗,top位置下调  -->
          <span>确认提交吗</span>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="newchange">确 定</el-button>
          </span>
          </el-dialog>
  
            <el-dialog
            title="提示"
            :visible.sync="error"
            width="30%"
            append-to-body
            top="20%"
            
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>{{ message }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="error = false">取 消</el-button>
                <el-button type="primary" @click="error = false">确 定</el-button>
            </span>
            </el-dialog>
  
      <!-- </el-card> -->
    </div>
  </template>
  
  <script>
  import http from "@/utils/request"
  import create from "@/mixins/create";
  import E from "wangeditor"
  
  export default {
    data() {
      //页面格式化 ctrl+alt+l
      return {
        
        fileList:[],//文件列表
        uploading: false, // 标记是否正在上传文件
        token1:sessionStorage.getItem('token1'),//获取token
        ruleForm: {
          problemId: [
            {required: false, message: '请输入具体问题', trigger: 'blur'},
          ],
          solveDesc: [
            {required: false, message: '请输入解决方案', trigger: 'blur'},
          ],
          
        },
  
        formData: {
          userId:"",
          problemId:"",
          solveDesc: "", 
          name:"",
        },
        selectedFiles: [],//前端存储文件列表
        error:false,
        dialogVisible:false,
        message:'',
        rolelist: [{
          id: '',
          name: '',
        }, ],
        value: '',
        editor:null,
          
        limit: 1,//上传文件限制
          
        text:'',
        name:'',
      }
    },
    mixins: [create],
    created() {
          
          
    },
    methods: {
      back(){
         
          this.$router.push('/SloveView')
      },
      getList(){
        this.name= sessionStorage.getItem('name')
        this.text= sessionStorage.getItem('text')
      },
      
       // 预览文件而不是立即上传
       beforeUpload(file) {
        this.selectedFiles.push(file);
        
        return false; // 停止默认的上传行为
      },
      handleExceed(files, fileList) {
        this.message=`当前限制选择${this.limit}个文件，如有多个文件，请打包上传`
        this.error=true
              // this.$message.warning(`当前限制选择${this.limit}个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
      // 文件删除
          handleRemove(file) {
        
            this.$confirm('确认删除此文件吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }).catch(() => {
            this.$message({
                showClose: true,
                message: '已取消',
                type: 'info',
            });
        }).then((res) => {
            if (res) {
                this.selectedFiles.forEach((value, index, array) => {
                    if (value.fid == file.fid) {
                        array.splice(index, 1);
                    }
                });
                this.$emit('onRemoveFile', file, this.selectedFiles);
                this.$message({
                    showClose: true,
                    message: '删除成功',
                    type: 'success',
                });
            }
        });
          },
      //上传文件方法
      uploadFile(file){
        // 获取文件对象
        const fileObject = file
  
        // 创建一个新的FormData对象
        const formData = new FormData()
  
        // 将文件对象添加到FormData对象中
        formData.append('file',fileObject)
        // 使用axios库向后端API发送POST请求，包含FormData对象
        http.post('/file/upload', formData)
          .then((response) => {
            console.log(response)
            // 如果后端API返回成功，可以在`handleFileUpload`方法中进行后续处理
            // this.handleFileUpload(response.data)
          })
          .catch((error) => {
            console.error(error)
            // 如果出现错误，可以在这里显示错误消息或其他处理方式
            this.$message.error(`上传文件 ${fileName} 失败！`)
          })
      },
      //提交
      newchange(){
              
              this.formData.userId=sessionStorage.getItem("userId2")
              this.formData.problemId=sessionStorage.getItem("problemId")
              
              
              if(true){
                  
                  const formData1 = new FormData()
                  // 设置 Content-Type 头部信息
                    if ('undefined' !== typeof formData1.headers) {
                        formData1.headers.set("Content-Type", "multipart/form-data");
                    }
         
                  formData1.append('userId', this.formData.userId);
                  formData1.append('problemId', this.formData.problemId);
                  formData1.append('solveDesc', JSON.stringify(this.formData.solveDesc));
                  formData1.append('name', JSON.stringify(this.formData.name));
  
                  this.selectedFiles.forEach(file => {
                      // 添加文件对象
                      formData1.append("file", file);
                  });
                  console.log('formData')
                  console.log(formData1)
                  
                  http.post('/solve/addsolve', 
                    formData1,
                  ).then(res => {
                      // console.log(res)
                      
                      if (res.data.code == 200) {
                          
                          this.selectedFiles = []; // 清空选中的文件
                          this.dialogVisible = false
                          this.$message({
                              message: res.data.msg,
                              type: 'success'
                          });
                          sessionStorage.removeItem('userId2')
                          sessionStorage.removeItem('problemId')
                          sessionStorage.removeItem('text')
                          sessionStorage.removeItem('name')
                          this.$router.push('/Problemview')
                      }
                      else {
                          this.dialogVisible = false
                          this.message=res.data.msg;
                          this.error=true;
                          this.selectedFiles = []; // 清空选中的文件
                          
                          
                      }
                  })
              }
      },
  
      //文件上传成功触发  后台返回值，当前文件数据，文件列表数据
      handleFileUpload(res,file,filelist){
        console.log(res)
        
      },
      
  
    },
    // mounted(){
    //   this.getporject()
    // }
  };
  </script>
  
  <style scoped>
  .notitle{
      color: black;
      font-size:25px;
      margin-top: 1%; 
      margin-left: 0%;
    }/* 面包屑 */
  
  
    
  
  .item-3 >>> .el-form-item__label {
    font-size: 20px;
    font-family: Arial, sans-serif;
  }
  .item-2 >>> .el-form-item__label {
    font-size: 20px;
    /* font-weight: bold */
  }
  .item-1{
      margin-left: 400px;
      margin-top: 50px;
      
  }
  .item-2{
      margin-left: 400px;
      margin-top: 20px;
      
  }
  .item-3{
      margin-left: 400px;
      margin-top: 50px;
      
  }
  
  .input{
      margin-left: 20px;
      width: 500px;
      height: 20px ;
  }
  .select{
      margin-left: 30px;
  }
  
  .change-1{
       margin-left: 500px;
       margin-top: 300px;
       
       width: 150px;
  }/* 按钮 */
  .change-2{
       margin-right: 450px;
       margin-top: 300px;
       width: 150px;
  }/* 按钮 */
  .container {
    display: flex;
    justify-content: space-between; /* 使其两边对齐 */
    align-items: center; /* 使其垂直居中 */
  }
  
  
  .clearfix{
    display: block;
  }
  .clearfix-2{
    margin-left: 20px;
    display: block;
  }
  /* 文件上传样式 */
  .avatar-uploader >>> .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 80px;
      height: 80px;
      line-height: 80px;
  }
  .avatar-uploader >>> .el-upload:hover {
      border-color: #409eff;
  }
   
  /*el-upload上传文件*/
  .avatar-uploader >>> .el-upload-list__item {
      background: url('@/assets/file.jpg') no-repeat center 10px;
      width: 80px;
      height: 80px;
      background-size: 48px 48px;
  }
   
  .avatar-uploader >>> .el-upload-list__item-name {
      width: 80px;
      position: absolute;
      left: 0px;
      bottom: 0px;
      display: block;
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #585858;
  }
   
  .avatar-uploader >>> .el-upload-list__item-name [class^='el-icon'] {
      display: none;
  }
  
  
  
  .fileName {
      width: 100%;
      font-size: 12px;
      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      bottom: 0px;
      text-align: center;
  }
  /* 文件上传样式 */
  
  
  
  </style>